<template>
    <div style="height: 100%;">
        <el-button type="primary" @click="addRows">新增</el-button>
         <el-button type="primary"  @click="saveFun">确定</el-button>
        <div style="height: 400px;display: flex; flex-direction: column;">
            <basicTableSum ref="editTableRef" v-bind="tableConfig" @editFormFun="editFormClick">
                <template #title_zh="{scope}"> 
                    <el-select filterable v-model="scope.title_zh.value" @change="value=>changeSelect(value,scope)">
                        <el-option v-for="selectItem in options" :key="selectItem.value" :label="selectItem.label"
                            :value="selectItem.value" />
                    </el-select>
                </template>
                <template #handle="{ row }">

                    <el-button type="danger" link @click="delFun(row)">删除</el-button>

                </template>
            </basicTableSum>
        </div>

        <!-- 页面代码 源码 -->
        <dropWrap key="oreo">
            <pre><code class="language-js">{{ htm }} </code></pre>
        </dropWrap>
    </div>
</template>
<script setup lang="ts">
    import { ref, reactive, defineProps, onMounted, computed, nextTick } from 'vue';
    import basicTableSum from "@/components/MerakEditTable/components/basicTable/moreEdit.vue";
    import dropWrap from "../../dropWrap.vue";

    let htm = ref < string > (`
    引入组件
            import basicTableSum from "@/components/MerakEditTable/components/basicTable/moreEdit.vue";
            
            <div style="height: 400px;display: flex; flex-direction: column;">
                    <basicTableSum v-bind="tableConfig" @editFormFun="editFormClick" ref="editTableRef">
                        <template #title_zh="{scope}"> 
                            <el-select filterable v-model="scope.title_zh.value" @change="value=>changeSelect(value,scope)">
                                <el-option v-for="selectItem in options" :key="selectItem.value" :label="selectItem.label"
                                    :value="selectItem.value" />
                            </el-select>
                        </template>
                        <template #handle="{ row }">
                            //操作列
                            <el-button type="danger" link @click="delFun(row)">删除</el-button>

                        </template>
                    </basicTableSum>
                </div>
        //默认支持可编辑类型 // input  date select
        //editFormFun  编辑之后事件返回当前编辑行

        1）const tableConfig = reactive({
                headData: tableHeadData,//表格头部数据   必须值
                tableData: tableData,//表格内容数据      必须值
                headConfig: headConfig,//可编辑列类型    必须值 
              
           })


            tableHeadData=[{
                title: "属性值(中文)",
                field: 'title_zh',
                length:'10'
                }]
            headConfig={
                title_zh: "input",
                title_ru:{
                    type:"select", 
                    options:options
                }
            }
            tableData=[{
                title_zh: {
                label: "",
                value: ""
            }}]


            //获取提交表单数据
            const editTableRef=ref(null)
            editTableRef.value.submitData(params);//参数可传可不传
  `);
    

  const editTableRef=ref(null)
  const changeSelect=(val,scope)=>{
 
  
    let optionsArr = options.find(item => item.value == val);
        scope.title_zh.label = optionsArr.label;
    scope.title_zh.value=val;
     let item=JSON.parse(JSON.stringify(tableData.value[scope.index])); 
     item.title_zh= scope.title_zh;
     tableData.value.splice(scope.index, 1, item);
     console.log(  tableData.value)
  }

    const addRows = () => { 
        let obj = {
            title_zh: {
                label: "",
                value: ""
            },
            title_ru: {
                label: "",
                value: ""
            },
            bieming: {
                label: "",
                value: ""
            },
            sort: {
                label: "",
                value: ""
            },
        };
        tableData.value.push(obj)
    }
    const delFun = (rows) => { 
        let index = rows.index;
        tableData.value.splice(index, 1);
    }

    const editFormClick = (rows) => {

        let index = rows.index;
        tableData.value.splice(index, 1, rows);
    }


    const saveFun = () => {
        let requireKeys = ['bieming', 'sort', 'title_ru', 'title_zh'];

        let newArr = tableData.value.map(v => {

            requireKeys.map(k => {
                delete v[k]?.errTip
                if (!v[k].value) {
                    v[k].errTip = "为必填项！！！"
                }
            })
            return {
                ...v
            }
        })

        tableData.value = newArr; 

       console.log(editTableRef.value.submitData())
    }


    const options = [
        {
            value: '1',
            label: 'Option1',
        },
        {
            value: '2',
            label: 'Option2',
        },
        {
            value: '3',
            label: 'Option3',
        },
        {
            value: '4',
            label: 'Option4',
        },
        {
            value: '5',
            label: 'Option5',
        },

    ]


    const tableHeadData = reactive([]);
    const tableData = ref([]);
    const headConfig = reactive({});//头部配置是否可编辑  
    const tableConfig = reactive({
        headData: tableHeadData,//表格头部数据
        tableData: tableData,//表格内容数据
        headConfig: headConfig,//可编辑列类型
        selection: false,//是否显示checkbox  
        dragDrop: true,//拖拽 
        number: true,//开启序号 
        // editStatus:false//开启虚拟
    })

    onMounted(() => {
        nextTick(() => {
            Prism.highlightAll();
        });
        let tableHead = [{
            title: "属性值(中文)",
            field: 'title_zh',
            length:'10'

        }]
        Object.assign(tableHeadData, tableHead);
        let headCon = {
            title_zh: "input",
            title_ru: "input",
            bieming: 'input',
            sort: 'input'
        }
        Object.assign(headConfig, headCon);

        let tableDataArr = [{
            title_zh: {
                label: "",
                value: ""
            },
            title_ru: {
                label: "",
                value: ""
            },
            bieming: {
                label: "",
                value: ""
            },
            sort: {
                label: "",
                value: ""
            },
        }];

        tableData.value = tableDataArr;
    })

</script>